<template>
    <z-paging
        v-model="list"
        @query="queryList"
        @onRefresh="refresh"
        ref="paging"
        :refresher-out-rate="0.8"
        empty-view-error-text="暂无数据"
        bg-color="#f5f5f5"
    >
        <uv-waterfall
            ref="waterfall"
            v-model="list"
            :add-time="240"
            :left-gap="leftGap"
            :right-gap="rightGap"
            :column-gap="columnGap"
            @changeList="changeList"
        >
            <!-- 第二列数据 -->
            <template v-slot:list1>
                <view>
                    <view
                        v-for="(item, index) in list1"
                        :key="item.id"
                        class="waterfall-item"
                        @click="itemClick(item)"
                    >
                        <image
                            :src="item.image"
                            mode="widthFix"
                            :style="[imageStyle(item)]"
                        ></image>
                        <view class="waterfall-item__ft">
                            <view class="waterfall-item__ft__title">
                                <text class="value breakText">{{
                                    item.title
                                }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
            <!-- 第二列数据 -->
            <template v-slot:list2>
                <view>
                    <view
                        v-for="(item, index) in list2"
                        :key="item.id"
                        class="waterfall-item"
                        @click="itemClick(item)"
                    >
                        <image
                            :src="item.image"
                            mode="widthFix"
                            :style="[imageStyle(item)]"
                        ></image>
                        <view class="waterfall-item__ft">
                            <view class="waterfall-item__ft__title">
                                <text class="value breakText">{{
                                    item.title
                                }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </uv-waterfall>
        <view
            slot="bottom"
            class="safeAreaBottom"
            style="background-color: #fff"
        >
            <u-tabbar
                :value="tabName"
                :fixed="false"
                @change="(name) => tabChange(name)"
                :placeholder="false"
                :safeAreaInsetBottom="false"
                activeColor="#588BF3"
                inactiveColor="#666666"
            >
                <u-tabbar-item
                    v-for="tabItem in currentTabbarList"
                    :text="tabItem.text"
                    :name="item.name"
                    :key="item.name"
                >
                    <u-image
                        width="44rpx"
                        height="44rpx"
                        slot="inactive-icon"
                        :src="'/' + tabItem.iconPath"
                    />
                    <u-image
                        width="44rpx"
                        height="44rpx"
                        slot="active-icon"
                        :src="'/' + tabItem.selectedIconPath"
                    />
                </u-tabbar-item>
            </u-tabbar>
        </view>
    </z-paging>
</template>

<script>
import { baseUrl } from "@/config/tendIdConfig";
import caches from "@/config/caches.js";
import { mapState } from "vuex";

export default {
    data() {
        return {
            list: [], // 瀑布流全部数据
            list1: [], // 瀑布流第一列数据
            list2: [], // 瀑布流第二列数据
            leftGap: 10,
            rightGap: 10,
            columnGap: 10,
        };
    },
    onShow() {
        uni.hideTabBar();
    },
    computed: {
        ...mapState(["tabName", "authority", "currentTabbarList"]),

        imageStyle(item) {
            return (item) => {
                const v =
                    uni.upx2px(750) -
                    this.leftGap -
                    this.rightGap -
                    this.columnGap;
                const w = v / 2;
                const rate = w / item.w;
                const h = rate * item.h;
                return {
                    width: w + "px",
                    height: "auto",
                };
            };
        },
    },
    methods: {
        // tabChange(name) {
        // 	this.$store.commit("SET_CURRENT_TAB_NAME", name)
        // },
        refresh() {
            // this.list = []
            this.list1 = [];
            this.list2 = [];
            this.$refs.waterfall.clear();
        },
        changeList(e) {
            this[e.name].push(e.value);
        },
        itemClick(item) {
            uni.navigateTo({
                url: `/pages_video/videoNew/index?clickId=${item.id}`,
            });
        },
        queryList(pageNum, pageSize) {
            // 业务员和客户 目前都用客户的token 统一拦截那边已经做过处理 所以视频这里单拉出来 没走拦截器

            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url:
                    baseUrl +
                    "/customer/video_info_customer/open/pageVideoNoToken",
                method: "POST",
                header: {
                    Authorization: token,
                },
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    recordTypeSet: [0, 1],
                    tenantId: this.$tendId,
                },
                success(res) {
                    const result = res.data;
                    const dataList = result.data.rows.map((item) => {
                        return {
                            image: item.videoCover,
                            title: item.videoIntro,
                            width: 127,
                            ...item,
                        };
                    });
                    that.$refs.paging.complete(dataList);
                },
            });
        },
    },
};
</script>

<style lang="scss">
.waterfall {
    background-color: #f1f1f1;
}

.waterfall-item {
    overflow: hidden;
    margin-top: 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.waterfall-item__ft {
    padding: 20rpx;
    background: #fff;

    &__title {
        margin-bottom: 10rpx;
        line-height: 48rpx;
        font-weight: 700;

        .value {
            font-size: 32rpx;
            color: #303133;
        }
    }

    &__desc .value {
        font-size: 28rpx;
        color: #606266;
    }

    &__btn {
        padding: 10px 0;
    }
}
</style>
